<template>
  <div class='bg_brack'>
    <van-nav-bar :title="$route.query.model" left-text="返回"
                 left-arrow @click-left="$router.go(-1)" />
    <!-- <van-swipe class="my-swipe" :autoplay="3000"
               indicator-color="white">
      <van-swipe-item v-for="(image, index) in images"
                      :key="index"> 1</van-swipe-item>
    </van-swipe> -->
    <div class="main-contain">
      <div class="sub-title" style="text-indent:2em;"
           v-html="form.demand">
      </div>
      <div class="sub-title"
           style="text-indent:2em;text-align:left"
           v-html="form.introduce">
      </div>
      <!-- <div class="bg_white">
        <div class="title">
          <img src="../assets/images/receive.png" alt="">
          <span>客户需求</span>
        </div>
        <p class="sub-title" v-html="form.demand"></p>
      </div>
      <div class="bg_white">
        <div class="title"><img
               src="../assets/images/notebook.png"
               alt=""><span>解决方案</span></div>
        <div class="sub-title" v-html="form.solution">
        </div> -->
      <van-image class="imgS" fit='contain' :src="imgUrl"
                 @click="preview()"></van-image>
      <!-- </div>
      <div class="bg_float">
        <div class="title"><img
               src="../assets/images/three-triangles.png"
               alt=""><span>收益与价值</span>
        </div>
        <div class="bg_white">
          <div class="list-title"
               v-for="(item,index) in form.valueList"
               :key="index">
            <p> {{index + 1}}、</p>
            <p v-html="item"></p>
          </div>
        </div> -->
      <!-- </div> -->
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
import requestData from "@/utils/requestData.js"
export default {
  name: 'FSDJ',
  components: {},
  data () {
    return {
      images: [],
      form: {},
      imgUrl: require(`../assets/images/${this.$route.query.model}.png`)
    };
  },
  computed: {},
  watch: {},
  mounted () {
    this.form = requestData[this.$route.query.model]
    console.log(this.form);
  },
  methods: {
    preview () {
      ImagePreview([this.imgUrl]);
    }
  },
}
</script>
<style lang='scss' scoped>
  .bg_brack {
    width: 100vw;
    // height: 100vh;
    background-color: #f5f5f6;
    letter-spacing: 0.0938rem;
    line-height: 28px;
    text-align: center;
    overflow-y: scroll;

    .my-swipe {
      .van-swipe-item {
        color: #fff;
        font-size: 1.25rem;
        text-align: center;
        height: 200px;
        background-color: red;
      }
    }
    .main-contain {
      .imgS {
        padding: 1rem;
      }
    }
    .bg_white {
      background-color: #fff;
      padding-top: 8px;
      margin: 16px;
      text-align: center;
      font-size: 1.125rem;
    }
    .title {
      text-align: center;
      font-size: 1.375rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 600;
      img {
        width: 1.875rem;
        height: 1.875rem;
        margin-right: 0.5rem;
      }
      span {
        padding: 0.625rem;
        border-bottom: 1px solid;
      }
    }
    .sub-title {
      background-color: #fff;
      padding: 10px;
      margin: 16px;
    }
    .bg_float {
      min-height: 18.75rem;
      background: url('../assets/images/float.png') no-repeat;
      background-size: 100%;
    }
    .list-title {
      text-align: left;
      display: flex;
      align-items: flex-start;
      p {
        margin: 0.3125rem;
      }
    }
  }
</style>